<template>
    <div class="header">
      <div class="left">
        <slot name="left"></slot>
      </div>
  
      <slot name="center">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" active-text-color="#4285f4">
          <el-menu-item v-for="(item, index) in menus" :key="index" :index="item.route" @click="handleSelect(item)">
            {{ item.name }}
          </el-menu-item>
        </el-menu>
      </slot>
  
      <div class="right">
        <slot name="right"></slot>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  
  // 定义 props
  // eslint-disable-next-line no-unused-vars, no-undef
  const props = defineProps({
    menus: {
      type: Array,
      default: () => []
    },
    index: {
      type: [String, Number],
      default: ''
    }
  })
  
  const router = useRouter()
  const route = useRoute()
  const activeIndex = ref('/homePage')
  
  // 处理菜单选择
  const handleSelect = (item) => {
    if (route.path !== item.route) {
      activeIndex.value = item.route
      router.push({ path: item.route })
    }
  }
  </script>
  
  <style scoped lang="less">
  .header {
    display: flex;
    justify-items: center;
    align-items: center;
    text-align: center;
    .left {
      min-width: fit-content;
    }
    .right {
      float: right;
    }
  }
  </style>
  